import React, { useCallback, useEffect, useState } from 'react'
import { Stage, Sprite, useApp, Graphics, Container } from '@inlet/react-pixi'
import SpinnerCountDown from './components/SpinnerCountDown'
import * as PIXI from 'pixi.js'
const DPR = window.devicePixelRatio

function Crash() {
    const [timeOfRate, setTimeOfRate] = useState(0)
    const [rate, setRate] = useState(1)
    const draw = useCallback(g => {
        g.clear()
        g.lineStyle(2, 0xFEEB77, 1);
        g.beginFill(0x191c35)
        // g.lineTo(50, 0)
        // g.endFill()
        // g.moveTo(50, 0)
        // g.beginFill(0x191c35)
        // g.lineTo(320, (-(rate-1)*100)<-200?-200:(-(rate-1)*100))
        g.quadraticCurveTo(100, 0, 350, (-(rate-1)*100)<-200?-200:(-(rate-1)*100))
        g.endFill()
    }, [rate])
    useEffect(() => {
        setInterval(() => {
            setTimeOfRate(v => {
                return v+100
            })
            setRate(v => {
                return v*1.007
            })
        }, 100);
    }, [])
    return (
        <>
            <Stage
                width={375}
                height={500}
                options={{
                    autoDensity: true,
                    antialias: true,
                    resolution: DPR,
                    backgroundColor: 0x191c35
                }}
            >
                <Graphics
                    x={10}
                    y={400}
                    draw={draw}
                />
            </Stage>
        </>
    )
}

export default Crash
